<template>
  <div class="content">
    <div>
      <MovieHeader class="header"></MovieHeader>
      <ul class="header-nav">
        <router-link tag="li" to="/select-city">
          {{ cityName }}
          <b>&#xe688;</b>
        </router-link>
        <li>
          <router-link v-for="m in movieState" :key="m.id" :to="m.to" tag="span" exact-active-class="active">
            {{ m.state }}
          </router-link>
        </li>
        <li>
          <b>&#xe617;</b>
        </li>
      </ul>
    </div>
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
    <Footer></Footer>
  </div>
</template>

<script>
import MovieHeader from "../components/MovieHeader";
import Footer from "../components/Footer";

export default {
  name: "Movie",
  components: {
    MovieHeader,
    Footer
  },
  computed: {},
  data() {
    return {
      cityName: '',
      movieState: [
        {id: 1, state: '热映', to: '/movies/hot-movie'},
        {id: 2, state: '待映', to: '/movies/waiting-movie'},
      ],

    }
  },

  mounted() {
    this.cityName = this.Bus.city
  },
  activated() {
    console.log('Movie')
  },
  methods: {},

}
</script>
<style lang="scss" scoped>
@import '../assets/scss/variable.scss';
@import '../assets/scss/mixin.scss';

@font-face {
  font-family: 'iconfont';
  src: url('../assets/icons/iconfont.eot');
  src: url('../assets/icons/iconfont.eot?#iefix') format('embedded-opentype'),
  url('../assets/icons/iconfont.woff2') format('woff2'),
  url('../assets/icons/iconfont.woff') format('woff'),
  url('../assets/icons/iconfont.ttf') format('truetype'),
  url('../assets/icons/iconfont.svg#iconfont') format('svg');
}

div.content {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 90%;
  justify-content: space-between;

  ul.header-nav {
    // 经典的1px问题(物理像素)
    display: flex;
    // border-bottom: 1px solid $font-primary-color;
    position: relative;
    padding-left: 0.8rem;
    @include border-bottom-1px;

    > li:first-child {
      position: absolute;
      top: 0;
      left: 0;
      @include icon;
      height: 0.44rem;
      line-height: 0.44rem;
      color: $font-primary-color;
      padding-left: 0.1rem;
      transform: scale(0.9);

      b {
        font-size: 0.12rem;
      }
    }

    > li:nth-child(2) {
      align-items: center;
      flex: 1;
      display: flex;
      justify-content: center;

      > span {
        width: 0.6rem;
        height: 100%;
        font-weight: 600;
        color: $font-primary-color;
        line-height: 0.44rem;
        box-sizing: border-box;
        text-align: center;
        margin-right: 0.3rem;

        &.active {
          color: $primary-color;
          border-bottom: 0.03rem solid $primary-color;
        }
      }
    }

    > li:last-child {
      width: 0.44rem;
      box-sizing: border-box;
      border-left: 1px solid $font-primary-color;
      line-height: 0.44rem;
      text-align: center;
      @include icon;
    }
  }
}

</style>